<template>
  <div class="songlists">
    <top />
    <header>
      <div class="left">
        <img :src="playlist.coverImgUrl" />
        <p>
          <van-icon name="play" />{{ parseInt(playlist.playCount / 10000) }}万
        </p>
      </div>
      <div class="right">
        <h4 class="title">{{ playlist.name }}</h4>
        <span v-for="(item, index) in playlist.tags" :key="index">{{
          item
        }}</span>
      </div>
    </header>
    <!-- <ul>
      <li
        v-for="(item, index) in songs"
        :key="item.id"
        @click="toPlayPages(id, item.id)"
      >
        <p class="num">{{ ++index }}</p>
        <div class="right">
          <p class="txt">{{ item.name }}</p>
          <p class="person">{{ item.ar[0].name }}</p>
        </div>
      </li>
      <van-notice-bar color="#0009" left-icon="info-o">
        歌单到底啦...
      </van-notice-bar>
    </ul> -->
  </div>
</template>

<script>
import top from "../../components/header.vue";
import { setSong } from "../../utils/auth";
import axios from "axios";
export default {
  data() {
    return {
      id: "",
      playlist: {},
      // songs: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    async getList() {
      this.id = this.$route.params.id;
      console.log(this.id);
      ///playlist/detail?id=24381616

      const res = await axios.get(
        "http://192.168.31.27:3000/playlist/detail?id=" +
          this.id +
          "&timestamp=" +
          new Date().getTime(),
        {
          withCredentials: true,
        }
      );
      console.log(res);
      this.playlist = res.data.playlist;

      // const res2 = await axios.get(
      //   "http://192.168.31.27:3000/playlist/track/all?id=" +
      //     this.id +
      //     "&timestamp=" +
      //     new Date().getTime(),
      //   {
      //     withCredentials: true,
      //   }
      // );
      // console.log(res2);
      // this.songs = res2.data.songs;
    },
    toPlayPages(listId, songId) {
      const song = {
        listId,
        songId,
      };
      setSong(JSON.stringify(song));
      this.$router.push("/playpage");
    },
  },
  created() {
    this.getList();
  },
  mounted() {},
  components: {
    top,
  },
};
</script>
<style scoped>
.songlists {
  width: 100%;
}
header {
  position: relative;
  margin-top: 10px;
  padding: 30px;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}
header .left {
  position: relative;
  float: left;
}
header .left img {
  width: 130px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 20px;
}
header .left p {
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  margin: 0;
  font-size: 14px;
  color: #000;
  border-radius: 100px;
  background-color: #ccc;
  position: absolute;
  right: 20px;
  top: 20px;
}
header .right {
  width: 180px;
  margin-left: 20px;
  float: left;
}
header .right h4 {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 500;
  height: 90px;
  line-height: 1.3;
  color: darkred;
}
header .right span {
  display: inline-block;
  font-size: 16px;
  color: #0008;
  margin-right: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 100px;
}
/* ul li {
  margin: 20px 30px;
  font-size: 24px;
  overflow: hidden;
}
ul li .num {
  float: left;
  line-height: 2.4;
  margin-right: 40px;
  font-size: 30px;
  color: #0008;
  text-align: center;
}
ul li .right {
  width: calc(100% - 100px);
  float: left;
  line-height: 1.5;
  
  overflow: hidden;
}
ul li .person {
  font-size: 18px;
} */
</style>
